<template>
 <div class="active">
   <el-form :model="formdata">
      <el-form-item>
        <el-input v-model="formdata.test" placeholder='输入角色名称'></el-input>
      </el-form-item>
      <el-button class="chande" @click="search">搜索</el-button>
      <el-button @click="replacement">重置</el-button>
        <el-button
          class="el-icon-plus"
          @click="eminct"
          >新增角色</el-button
        >
    </el-form>
       <el-table
      :data="list"

      style="width: 100%"
      :default-sort = "{prop: 'order', order: 'ascending'}">
       <el-table-column
        prop="order"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="角色名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="描述"
        width="180">
      </el-table-column>
      <el-table-column
        prop="number"
        label="用户数">
      </el-table-column>
         <el-table-column
        prop="createTime"
        label="添加时间">
      </el-table-column>
         <el-table-column
        prop="status"
        label="是否启用">
        <template v-slot="{row}">
            <el-switch
         v-model="row.status"
         active-color="#ff7144"
         @change="substance(row)">
       </el-switch>
        </template>
      </el-table-column>
          <el-table-column
          fixed="right"
         width="180"
        prop="address"
        label="操作">
        <template v-slot="{row}">
          <el-button type="text" size="small" @click="menus(row)">分配菜单</el-button>
          <el-button type="text" size="small" @click="metch(row)">编辑</el-button>
          <el-button type="text" size="small" @click="remove(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
     <el-pagination
        class="lyx"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="q.index"
        :page-size="5"
        layout="prev, pager, next, jumper"
      >
      </el-pagination>
    <!-- 新增角色 -->
       <el-dialog :title="isedite ? '编辑角色': '新增角色'"  
       :close-on-click-modal='false' 
       :visible.sync="outerVisiboscd" 
       v-if="outerVisiboscd">
    <Addrole @close='hClosed' :isedite="isedite" :childata='childata'></Addrole>
</el-dialog>
 <el-dialog title="分配菜单"  :close-on-click-modal='false' :visible.sync="outerVisible" v-if="outerVisible">
    <Diagram class="aiopedg" @close='outerVisible= false' :childata="childata"></Diagram>
</el-dialog>
 </div>
</template>
 
<script>
import {character,expurgate,forbenel,fordisle} from '@/api/limits'
import Addrole from './components/addrole.vue'
import Diagram from './components/diagram.vue'

export default {
  components: { Addrole, Diagram },
data () {
  return {
    isedite:false,
    outerVisiboscd:false,
    outerVisible:false,
    q:{
      index:1,
      size:10,
      roleTitle:''
    },
    formdata:{
      test:''
    },
    childata:{},
    list:[]
  }
},
created(){
  this.loachonget()
},
methods:{
   // 页面
 async loachonget(){
    const res = await character(this.q)
    this.list = res.data.data
  },
  // 新增角色
  eminct(){
    this.outerVisiboscd = true
    this.isedite = false
  },
  // 编辑角色
  metch(row){
this.outerVisiboscd = true
this.isedite = true
this.childata = row
  },
  // 关闭组件
  hClosed(){
    this.outerVisiboscd = false
    this.loachonget()
  },
  // 删除角色
  remove(row){
     this.$confirm("您确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
          const params = new URLSearchParams(); // 创建URLSearchParams数据对象
          params.append("menuId", row.id); //
          const res = await expurgate(params);
          this.loachonget()

          if (res.code !== 200) return this.$message.error(res.msg);
          this.$message.success(res.msg);
        })
  },
  // 角色开启禁用
   async substance(row){
     if(row.status == false){
          const params = new URLSearchParams();
        params.append("menuId",row.id); //
        const red = await fordisle(params);
       this.$message.success(red.msg)
       this.loachonget()
        } else{
        const param = new URLSearchParams();
        param.append("menuId",row.id); //
        const rev = await forbenel(param);
        this.$message.success(rev.msg)
        this.loachonget()
        }
  },
  // 分配菜单
  menus(row){
  this.outerVisible = true
   this.childata = row
  },
    // 搜索
      search(){
        this.q.roleTitle = this.formdata.test
        this.loachonget()
      },
    // 重置
      replacement(){
        this.q.index = 1
        this.q.roleTitle = ''
        this.formdata.test = ''
        this.loachonget()
      },
    // 分页
    handleCurrentChange(index) {
      this.q.index = index;
      this.loachonget();
    },
    handleSizeChange(size) {
      this.q.size = size;
      this.loachonget();
    },
}
}
</script>

<style scoped>
.active{
  background-color: #fff;
  padding: 30px 20px;
}
 .el-form-item{
  width: 15% !important;
  display: inline-block;
margin-right: 20px;

}

.chande{
  display: inline-block;
  background-color: #ff7144;
  color: #fff;
  border: 1px solid #ff7144;
}
.el-icon-plus {
  color: #ff7144;
  position: absolute;
  right: 5%;
  border: 1px solid #ff7144;
}
.el-icon-plus:hover {
  background-color: #fff;
}
::v-deep .el-dialog{
  width: 500px !important;
}
</style>